<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="reset.css">

    <style>

        *{
            margin: 0;
            padding: 0;
        }

        /* 任何一个 标签  前后 都可以添加伪元素 */
        /* 伪元素 是作为  子元素 存在的 */
        /* content属性必须有 */
        /* 伪元素默认是行内元素 */
    

        /* 前边的伪元素 */
        p::before{
            content:'你好'
        }
        p::after{
            content:'!'
        }
        /* 伪元素不能 hover  */
        /* p::before:hover{
            color: red;
        } */

        p:hover::before{
            color: red;
        }



        /* 使用场景  */
        /* 1.  前边图标后边文字 */
        /* 替代原来的 span  */
        .d1::before{
            content: '';
            display: inline-block;
            width: 16px;
            height: 16px;
            background: red;
            vertical-align: -2px;
        }

        /* 2.   导航的跟随线   用  ::after  取代 之前的额 span*/


        /* 3.  清除浮动的 影响  */
        /* clear:both; 才是 解决浮动最好的办法 */
        ul{
            background-color: red;
            /* overflow: hidden; */
        }

        /* 伪元素 替代了  最后 空的 div元素 */
        /* ul::after{
            content:'';
            display: block;
            clear: both;
        } */
        li{
            width: 200px;
            height: 100px;
            background-color: orange;
            float: left;
        }


        /* 用 clear  这个类名 去 清除 浮动的影响 */
        .box{
            background-color: pink;
        }
        .item{
            float: left;
            width: 200px;
            height: 100px;
            background-color: blue;
        }




        /* `E::first-letter`文本的第一个字母或字
        `E::first-line` 文本第一行
        `E::selection` 被选中的文本 */
        .text{
            width: 300px;
            background-color: orange;
        }
        .text::first-letter{
            font-size: 30px;
            font-weight: bolder;
        }
        .text::first-line{
            color: red;
        }
        .text::selection{
            color: blue;
            background-color: red;
        }
    </style>
</head>
<body>
    <p>不凡学院</p>

    <div class="d1">微信</div>


    <ul class="clear">
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>

    </ul>

    <div class="box clear">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>

    </div>

    <div class="text">
        不管是生活快消品，还是教育行业产品，还是美妆护肤品，都纷纷加入直播卖货的大军。
        “淘宝直播女王”薇娅更是达到了5小时直播卖货1.1亿元的战绩！
    </div>
</body>
</html>